<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en" xmlns="http://java.sun.com/jsf/html">
<head>
    <meta charset="UTF-8">
    <title>小说详情</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="css/bootstrap-theme.css">
    <link rel="stylesheet" href="css/default.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="css/light.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="css/dark.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="css/bar.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen"/>
    <script src="js/jQuery.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.easing.compatibility.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
    <style>

        .a {
            height: 50px;
            padding: 15px 0;
            background-color: #31b0d5;
        }

        .ss {
            display: inline-block;

            zoom: 1;
        }

        .bg {
            width: 100px;
            height: 15px;
            border-radius: 10px;
            background: white;
        }

        .main {
            height: 15px;
            border-radius: 10px;
            background: lawngreen;
        }

        .tt {
            width: 750px;
            height: auto;

        }

        .t {
            width: 200px;
            height: 800px;

        }

        .mrg {
            margin-bottom: 15px;
            display: block;
        }

        .book-fie h3 {
            height: 30px;
            margin-bottom: 15px;
            font-size: 24px;
            color: #333;
            line-height: 30px;
            font-weight: 700;
        }

        .q {
            overflow: hidden;
            padding-left: 10px;
            font-size: 1.1em;

        }

        li {

            list-style: none;

            display: list-item;
            text-align: -webkit-match-parent;
        }

        .book-tron li {
            float: left;
            margin-right: 40px;
        }

        .book-fie ul {

            display: block;
            list-style-type: disc;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;

        }

        .po {
            width: 488px;
            margin-left: 10px;
        }

        .book-fie {
            width: 488px;
            margin-left: 14px;

        }

        .f-1 {
            float: left;
        }

        .img {
            width: 210px;
            height: 300px;
        }

        form, ul, div, span, li, h3, h5 {
            margin: 0px;
            padding: 0px;
        }

        form {
            display: block;
        }

        .trag {
            color: #999 !important;
        }

        .font-color {
            color: black;
        }

        .book-fie p {
            color: #333;
            font-size: 12px;
            margin: 15px 0 15px 0;
            line-height: 23px;
            height: 100px;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .book-fie .read-btn {
            position: absolute;

        }

        .read-btn a {
            vertical-align: middle;
        }

        p {
            padding: 0px;
            display: block;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
        }

        .line {
            clear: both;
            height: 0;
            line-height: 0;
            font-size: 0;
        }

        .btn-blue {
            height: 38px;
            line-height: 38px;
            padding: 0 40px 0 40px;

            border: 1px solid #04bec1;

        }

        .btn-blue, .btn-blue-cmet {
            background: #04bec1;
            color: #fff;
            font-family: "Microsoft YaHei UI";
            display: inline-block;
            font-size: 14px;
        }

        .btn-book-keep {
            padding: 0 40px 0 40px;
            margin: 0 14px 0 1px;
            vertical-align: middle;
            height: 38px;
            line-height: 38px;
            font-size: 16px;
            display: inline-block;
            border: 1px solid #dedede;
            background: #fafafa;
            color: #0f0f0f;
            font-family: "Microsoft YaHei UI";
        }

        .title {
            margin-top: 15px;
            margin-bottom: 10px;
            border-bottom: 1px solid #dedede;
            height: 42px;
            line-height: 42px;
            color: #0f0f0f;
        }

        .title .head {
            float: left;
            cursor: default;
            font-size: 14px;
            color: #999;
            font-weight: 700;
        }

        .title .rav {
            float: right;
            color: #999;
        }

        .title h3 {
            display: block;

            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;

        }

        .content-list {
            zoom: 1;
            overflow: hidden;
        }

        .content-list li {
            float: left;
            width: 345px;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #ededed;
        }

        h3, h5 {
            font-size: 100%;
            font-weight: 400;
        }

        .container a {
            text-decoration: none;
            outline: 0px;
            color: #333;
        }

        img {
            display: inline-block;
        }

        .cmet li {
            padding-bottom: 12px;
            margin-bottom: 20px;
            border-bottom: 1px solid #ededed;
        }

        .comment-bord {
            overflow: hidden;
        }

        .pic {
            float: left;
            width: 50px;
            margin-right: 10px;
            position: relative;
        }

        .pic .img-user {
            width: 48px;
            height: 48px;
            border: 1px solid #f3f3f3;
        }

        .cmet-info {
            float: none !important;
            overflow: hidden;
        }

        .cmet .cmet-info {
            line-height: 24px;
        }

        .comment-bord .cmet-info {
            width: 650px;
        }

        .vip1, .vip2, .vip3, .vip4, .vip5, .vip6, .vip7 {
            width: 16px;
            height: 16px;
            margin-bottom: 0;
            background: url(vip.png) no-repeat;
        }

        .vip1 {
            background-position: -16px 0;
        }

        .cmet-info span {
            display: inline-block;
            margin-right: 4px;
            vertical-align: middle;
        }

        .cmet p {
            color: #333;
            line-height: 18px;
            word-wrap: break-word;
            word-break: break-all;
        }

        .clearfix {
            clear: both;
            height: 0;
            line-height: 0;
            font-size: 0;
        }

        .cmet-ar {
            margin-top: 15px;
            padding: 0 15px 15px 15px;
            background: #f7f7f7;
        }

        .title .nav {
            color: #999;
            float: right;
        }

        .nav-org {
            color: #d58512 !important;
            font-weight: bold;
        }

        textarea.input-txt {
            width: 674px;
            height: 121px;
            padding-top: 7px;
        }

        .input-txt {
            padding: 0 7px 0 7px;
            background: url(input-bg.gif) no-repeat;
        }

        .input-txt {
            border: 1px solid #d0d0d0;
            outline: 0;
        }

        textarea {
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit;
        }

        textarea {
            resize: none;
        }

        textarea {
            margin: 0;
        }

        textarea {
            -webkit-appearance: textarea;

            -webkit-rtl-ordering: logical;
            -webkit-user-select: text;
            flex-direction: column;
            cursor: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .cmet-ar .role-yar {
            position: relative;
            margin-top: 12px;
        }

        button.btn-blue-cmet {
            height: 30px;
            border: none;
        }

        .btn-blue-cmet {
            width: 93px;
            padding: 0;
            text-align: center;

        }

        .copyright {
            width: 100%;
            padding: 25px 0 25px 0;
            height: auto;
            line-height: 20px;
            border-top: 1px solid #e9e9e9;
            color: #999;
            text-align: center;
            background: #fff;
            margin-top: 100px;
        }

        .zl {
            position: absolute;
            left: 1150px;
            top: 50px;
            width: 80px;
            height: 25px;
            background-color: wheat;
        }
    </style>
</head>
<body>
<div class="container">
    <!--登陆头部-->
    <div id="cg">
        <div class="row" id="dl">
            <div class="a">
                <form id="f1" action="xsw.jsp">
                    <label>用户名:</label>
                    <input style="height: 22px;width: 100px" name="name"/>
                    <label>密码:</label>
                    <input type="password" style="height: 22px;width: 100px" name="pwd"/>
                    <button id="qr" type="submit" style="width: 50px;height: 23px;line-height: 3px; font-size: 10px">
                        登录
                    </button>
                    <a href="reg.html" style="padding-left: 20px;">注册用户</a>
                    <span style="padding-left: 20px;">欢迎来的爬虫小说!</span>
                    <span style="padding-left: 20px;">新用户注册可享免费观看VIP小说</span>
                    <a href="https://123.sogou.com" style="padding-left: 20px;">网址大全</a>
                    <a href=" http://kan.sogou.com" style="padding-left: 20px;">电影</a>
                    <a href=" http://cp.sogou.com/kaijiang/#fr=Cf21008" style="padding-left: 20px;">彩票</a>
                    <a href=" http://tuan.sogou.com/" style="padding-left: 20px;">团购</a>
                    <a href=" https://vip.etao.com/?pid=mm_33344738_3413950_11025847&tb_lm_id=l_sczl_sogou_dingbu" style="padding-left: 20px;">购物</a>
                </form>

            </div>
        </div>
    </div>
    <!--登陆成功头部-->
    <div id="jr" style="display: none" >
        <div class="row">
            <div class="a">
                <span style="padding-left: 20px" id="sj"></span>
                <span style="padding-left: 5px" id="xq"></span>
                <span>
                <span style="padding-left: 20px">
                    欢迎
                    <label id="nickname">亲爱的书友</label>
                </span>
                <span style="padding-left: 20px" id="grz">
                   <img id="icon" src="man.jpg" width="30px" height="25px">
                    <label class="vip1"></label>
                </span>
                     <span class="bg ss">
                     <span class="main ss"></span>
                     </span>
            <span id="jdt" class="num ss">0%</span>
                    <button id="gb" style="border: none;background-color: #31b0d5;">退出登录</button>
                     <label><a href="grzx.html" style="text-decoration: none">个人中心</a></label>
                    <span style="padding-left: 10px;">观看最新推荐小说</span>
                     <a href="https://123.sogou.com" style="padding-left: 10px;">网址大全</a>
                    <a href=" http://kan.sogou.com" style="padding-left: 20px;">电影</a>
                    <a href=" http://cp.sogou.com/kaijiang/#fr=Cf21008" style="padding-left: 20px;">彩票</a>
                    <a href=" http://tuan.sogou.com/" style="padding-left: 20px;">团购</a>
                    <a href=" https://vip.etao.com/?pid=mm_33344738_3413950_11025847&tb_lm_id=l_sczl_sogou_dingbu" style="padding-left: 20px;">购物</a>
            </span>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 30px; padding-left: 20px;">
        <div class="col-md-offset-1 col-md-1 col-sm-1">
            <a href="/www/main"><img src="99.jpg"></a>
        </div>
        <div class="col-md-offset-1 col-md-4 col-sm-4">
            <div class="input-group" style="margin-top: 30px">
                <input type="text" class="form-control"/>
                    <span class="input-group-btn dropdown">
                        <button class="btn btn-default" type="submit">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-1 col-sm-6 col-md-6 tt">
            <div class="row">

    <img class="f-1 img" src="/book/${requestScope.book.image}">



                <div class="book-fie f-1">
                    <h3>${requestScope.book.name}</h3>
                    <ul class="book-tron">
                        <li>
                            <span class="mrg trag">作者：<a href="#" target="_blank">${requestScope.book.author}</a></span>
                            <span class="trag">时间：<span class="font-color">${requestScope.book.time}</span></span>
                        </li>
                        <li>
                            <span class="mrg trag">分类：<a href="#" target="_blank">${requestScope.book.type}</a></span>
                            <span class="trag">总人气：<span class="font-color">${requestScope.book.click}</span></span>
                        </li>
                        <li>
                            <span class="mrg trag">版权方：<a href="#" target="_blank">爬虫</a></span>
                            <span class="trag">评分：<span class="font-color">${requestScope.book.score}</span></span>
                        </li>
                    </ul>
                    <div class="line"></div>
                    <p><span class="trag">简介:</span>${requestScope.book.intro}</p>
                    <div class="read-btn">
                        <a href="YueDu.html" class="btn-blue">点击阅读</a>
                        <a href="#" class="btn-book-keep" data-id="123">收藏</a>
                    </div>
                </div>



            </div>
            <div class="chap">
                <div class="title">
                    <h3 class="head">章节目录</h3>
                    <div class="rav">
                        <a href="#">全部目录>></a>
                    </div>

                </div>
                <ul class="content-list">
                    <li>
                        <h5>
                            <a href="#">第一章 123</a>
                        </h5>
                    </li>
                    <li>
                        <h5>
                            <a href="#">第一章 123</a>
                        </h5>
                    </li>
                    <li>
                        <h5>
                            <a href="#">第一章 123</a>
                        </h5>
                    </li>
                    <li>
                        <h5>
                            <a href="#">第一章 123</a>
                        </h5>
                    </li>
                </ul>
            </div>
            <!--用户评论区-->
            <div class="comment">
                <div class="title">
                    <h3 class="head">本书评论</h3>
                    <div class="rav">
                        <a href="#">全部评论>></a>
                    </div>
                </div>
                <ul class="cmet" id="ment">
                    <li>
                        <div class="comment-bord">
                            <!--用户头像-->
                            <div class="pic">

                                    <img src="man.jpg" class="img-user">

                            </div>
                            <div class="cmet-info">
                                <!--用户名称-->
                                <div id="username">
                                    123455
                                    <span class="vip1"></span>
                                    <p id="userop"></p>
                                    <span id="optime"></span>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </li>


                </ul>
            </div>
            <div class="cmet-ar" >
                <form id="comment" method="post">
                    <div class="title">
                        <h3 class="head">评论本书</h3>
                        <div class="nav">
                            您还可以输
                            <span class="nav-org">200</span>
                            个字符
                        </div>
                    </div>
                    <textarea onchange="this.value=this.value.substring(0,200)"
                              onkeydown="this.value=this.value.substring(0,200)"
                              onkeyup="this.value=this.value.substring(0,200)"
                              class="input-txt" name="con"></textarea>
                    <div class="role-yar">
                        <button type="submit" class="btn-blue-cmet" id="ecun">发表评论</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-sm-3 col-md-3 col-lg-3 col-xs-3 t">

        </div>
    </div>
    <div class="clearfix">

    </div>

</div>
<div class="copyright">
    <p>本站所有小说为转载作品，所有章节均由网友上传，转载至本站只是为了宣传本书让更多读者欣赏。</p>
    <p>Copyright © 2015 爬虫小说 All Rights Reserved.</p>
    <p>冀ICP备11007602号</p>
</div>


<script src="js/xsw.js"></script>
<script type="text/javascript">
    $(function(){
        var bookk=${requestScope.book};
        console.log(bookk);
    })
</script>
</body>
</html>
